<template>
	<div class="additional">
			<div class="basic_data_jb" style="margin-bottom: 20px;">
				<img src="../../../../../static/img/res_img/jbzl.png" class="basic_data_img"/>
				<span class="span1">附加信息</span>
			</div>
			<div class="additional_other" v-show="a_text">
				{{texte}}
			</div>
			<i-button type="primary" long  @click="AddTionClick" v-show="AddTion">+添加附加信息</i-button>
			<div  class="_addbasic_data"  v-show="AddTionText">
				<Input @input="descInput" v-model="desc" type="textarea" :rows="4" 
					placeholder="Enter something..." maxlength="1000"/>
				<div class="less_num">你还可以输入<span>{{remnant}}/1000</span></div>
				<div class="basic_data_foot">
					<i-button type="primary" style="width: 100px; margin-right: 50px;"
						 @click="handleInfoSureClick">保存</i-button>
				    <i-button style="width: 100px;" @click="handleInfoCancelClick">取消</i-button>
			    </div>
			</div>
		</div>
</template>
<script>
	import axios from 'axios'
	export default {
    	name: 'Additional',
        data () {
            return {
            	a_text:true,
            	AddTion:true,
            	AddTionText:false,
            	ListData:[],
            	texte:"",
            	desc:"",
            	remnant:"1000"
            }
        },
        methods:{
        	load (){
			  axios.get('/static/mzx/detail.json').then(this.getCityInfoSucc)
			},
			getCityInfoSucc(res){
				res = res.data
				if(res.data){
					this.ListData = res.data.AddText
					this.texte=this.ListData.texts
				}
			},
        	AddTionClick(){
        		this.a_text = false,
        		this.AddTion = false,
            	this.AddTionText = true
            	this.desc=this.ListData.texts
        	},
			descInput(){
				 var txtVal = this.desc.length;
				 this.remnant = 1000 - txtVal;
			},
			handleInfoSureClick(){
				this.a_text = true,
				this.AddTion = true,
            	this.AddTionText = false
			},
			handleInfoCancelClick(){
				this.a_text = true,
				this.AddTion = true,
            	this.AddTionText = false
			}
		},
		mounted () {
			this.load();
		}
    }
	
</script>
<style>
	.less_num{
		/*border: 1px solid red;*/
		margin-top: 10px;
	    text-align: right;
	    font-size: 12px;
	    color: #999;
	}
	.additional_other{
		padding-left: 40px;
		padding-bottom: 20px;
		padding-right: 30px;
	}
	._addbasic_data{
		border: 1px solid #419BFE;
		border-top: 6px solid #419BFE;
		margin-top: 20px;
		padding: 10px 20px;
	}
</style>